<div class="flex flex-col flex-auto min-w-0">

    <!-- Main -->
    <div class="flex flex-col items-center p-6 sm:p-10">
        <div class="flex flex-col w-full max-w-4xl">
            <div class="-ml-4 sm:mt-8">
                <a
                    mat-button
                    [routerLink]="['../']"
                    [color]="'primary'">
                    <mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
                    <span class="ml-2">Back to Help Center</span>
                </a>
            </div>
            <div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
                Frequently Asked Questions
            </div>
            <ng-container *ngFor="let faqCategory of faqCategories; trackBy: trackByFn">
                <div class="mt-12 sm:mt-16 text-3xl font-bold leading-tight tracking-tight">{{faqCategory.title}}</div>
                <mat-accordion class="max-w-4xl mt-8">
                    <ng-container *ngFor="let faq of faqCategory.faqs; trackBy: trackByFn">
                        <mat-expansion-panel>
                            <mat-expansion-panel-header [collapsedHeight]="'56px'">
                                <mat-panel-title class="font-medium leading-tight">{{faq.question}}</mat-panel-title>
                            </mat-expansion-panel-header>
                            {{faq.answer}}
                        </mat-expansion-panel>
                    </ng-container>
                </mat-accordion>
            </ng-container>
        </div>
    </div>

</div>
